<template>
  <div class="myselfs">
   <div class="myself_f">
      <div class="myself_f_f">
        <img src="../../img/bg.jpg" alt="">
        <p class="submit_f">立即登录</p>
      </div>
      <div class="myself_f_se">
        <p class="myself_ticket">
          <i class="iconfont icon-box-fill"></i>
          <i>电影订单</i>
        </p>
        <p class="myself_shops">
          <i class="iconfont icon-picside-fill"></i><i>商品订单</i>
        </p>
      </div>
   </div>
   <div class="myself_se">
     <ul>
       <li>
         <i class="iconfont icon-box-fill"></i>
         <i class="active">卖座券</i>
         <i>&gt;</i>
       </li>
       <li>
         <i class="iconfont icon-gift"></i>
         <i class="active">组合红包</i>
         <i>&gt;</i>
       </li>
       <li>
         <i class="iconfont icon-transanction"></i>
         <i class="active3"><i class="active">余额</i>
            <i>￥0</i>
         </i>
         <i>&gt;</i>
       </li>
       <li class="active1">
         <i class="iconfont icon-bug-report"></i>
         <i class="active">设置</i>
         <i>&gt;</i>
       </li>
     </ul>
   </div>
  </div>
</template>

<script>


export default {
  name: 'Myself',
  components: {
    
  },
  
}
</script>
<style lang="scss" scoped>
  .myselfs{
    width: 100%;
    height: 600px;
    background: #f4f4f4;
    display: flex;
    flex-direction: column;
    .myself_f{
      height: 250px;
      background: #ffffff;
      .myself_f_f{
        height: 168px;
        background-image:url("../../img/bg2.jpg");
        display: flex;
        align-items: center;
       img{
          width: 82px;
        height: 82px;
       border-radius: 50%;
       border: 5px solid #ccc;
       margin-left: 10px;
       }
        .submit_f{
          height: 82px;
          width: 50%;
          font-size: 18px;
          color: white;
          display: flex;
          align-items: center;
         margin-left: 15px;
        }
      }
      .myself_f_se{
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        i{
          font-style: normal;
          font-size: 14px;
          color: #797d82;
        }
        .myself_ticket{
          height: 60px;
          display: flex;
          margin-top: 10px;
          flex-direction: column;
          justify-content: space-around;
          .icon-box-fill{
            font-size: 25px;
            color: #ffc82f;
          }
        }
        .myself_shops{
           display: flex;
           height: 60px;
          margin-top: 10px;

          flex-direction: column;
          justify-content: space-around;
           .icon-picside-fill{
            font-size: 25px;
            color: #c6da5c;
          }
        }
      }
    }
    .myself_se{
      width: 100%;
      height: 225px;
      margin-top: 10px;
      background: #ffffff;
      ul{
        display: flex;
        flex-direction: column;
        li{
          height: 54px;
          width: 100%;
          border-bottom: 1px solid #ccc;
          display: flex;
          justify-content: space-around;
          align-items: center;
          i{
            font-style: normal;
            color: #ccc;
          }
          .icon-box-fill{
              font-size: 18px;
              color: #ffac96;
          }
          .icon-gift{
            color: #bea882;
             font-size: 18px;
          }
          .icon-transanction{
            color: #ffc86d;
             font-size: 19px;
          }
          .icon-bug-report{
            color: #c4d36c;
             font-size: 20px;
          }
          .active{
            width: 65%;
            text-align: left;
            font-size: 16px;
            color: black;
          }
          .active3{
            width: 65%;
            text-align: left;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
          }
        }
        .active1{
          border: 0px;
        }
      }
    }
  }
</style>
